<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .current{background: #ccc;color:#ff0000 }
    </style>
</head>
<body>
    <div class="'box" id="'box">
        元素1
    </div>
    <ul id="list">
        <li>前端开发</li>
        <li>服务器端开发</li>
        <li>UI设计</li>
    </ul>
    <script>
        //设置id为box这个元素的文字颜色,
        //属性是减号连接的复合形式时，必须转换为驼峰形式
        var box=document.getElementById('box');
        box.style.color='#f00';
        box.style.fontWeight='b'
        //获取页面中所有的li
        var lis=document.getElementsByTagName('li');
        console.log(lis.length);
        //获取id为list下的所有li
        var lis2=document.getElementById('list1').getElementsByTagName('li');
        console.log(lis2.length);
        //遍历每个li，将数组转换为DOM对象
        for(var i=0,len=lis.length;i<len;i++){
            console.log(lis[i].innerHTML);
            lis[i].innerHTML=lis[i].innerHTML+'程序';
            lis[1].className='current';

        }
        console.log(document.getElementById('box').className)
        //
    </script>
</body>
</html>